<template>
  <div class="note-header-common">
    <div class="note-header">
      <div class="note-title">{{ title }}</div>
      <button class="write-btn" @click="handleUpdate()">{{ rightLable }}</button>
    </div>
  </div>
</template>
<script setup>
const emits = defineEmits("updateEditor");
import { userEditorStore } from "@/stores/editor.js";
const userEditor = userEditorStore();
//我传递过来一个key，区分当前是那个文本 输入
const props = defineProps({
  hide: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
  },
  rightLable: {
    type: String,
  },
  current: {
    type: String,
    default: "",
  },
});
const handleUpdate = () => {
  //初始化设置不同的参数信息
  if(props.current == 6){
    userEditor.handleUpdate({ key: "maskTitle", value: '笔 记' });
  }else if(props.current == 4){
    userEditor.handleUpdate({ key: "maskTitle", value: '提供解析' });
  }else if(props.current == 3 || props.current == 5){
    userEditor.handleUpdate({ key: "maskTitle", value: '评 论' });
  }

  userEditor.handleUpdate({ key: "current", value: props.current });
  userEditor.updateEditor(true);
};
</script>
<style lang="scss" scoped>
.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  .note-title {
    font-size: 18px;
    font-weight: 500;
    color: #000;
  }

  .write-btn {
    padding: 6px 12px;
    border-radius: 4px;
    // border: 1px solid ;
    border: 1px solid #126983;
    color: #126983;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;

    &:hover {
      background: rgba(33, 150, 243, 0.1);
    }
  }
}
.note-header-common {
  position: relative;
  .ckEditor {
    position: absolute;
  }
}
</style>
